import React, { useState, useEffect } from 'react';
import styles from './user.module.css';
import usertx from '../avatars/usertx.png'

export default function user() {

    const [formData, setFormData] = useState({
        username: '',
        email: '',
        phone: '',
        province: '河北省',
        address: '保定市莲池区',
        gender: '',
    });
    const [errors, setErrors] = useState({});
    const [loading, setLoading] = useState(false);
    const [success, setSuccess] = useState(false);

    const handleInputChange = (e) => {
        const { name, value } = e.target;
        setFormData({
            ...formData,
            [name]: value,
        });
    };

    const handleSubmit = (e) => {
        e.preventDefault();
        const { username, email, phone, province, address, gender } = formData;
        const errors = {};

        if (!username) {
            errors.username = '用户名不能为空';
        }

        if (!email) {
            errors.email = '电子邮件不能为空';
        } else if (!/\S+@\S+\.\S+/.test(email)) {
            errors.email = '电子邮件格式不正确';
        }

        if (!phone) {
            errors.phone = '手机号不能为空';
        } else if (!/^\d{11}$/.test(phone)) {
            errors.phone = '手机号必须是11位数字';
        }

        if (!province) {
            errors.province = '省份不能为空';
        }

        if (!address) {
            errors.address = '详细地址不能为空';
        }

        if (!gender) {
            errors.gender = '性别不能为空';
        }

        if (Object.keys(errors).length === 0) {
            setLoading(true);
            // 模拟异步请求
            setTimeout(() => {
                setLoading(false);
                setSuccess(true);
                // 在这里处理表单提交成功后的逻辑
            }, 2000);
        } else {
            setErrors(errors);
        }
    };

    const handleCancel = () => {
        // 在这里处理取消操作
    };

    const [stop, setStop] = useState(true);
    useEffect(() => {
        if (stop) {
            let ls = JSON.parse(localStorage.getItem('user'));
            setFormData(ls);
            setStop(false);
        }
    })

    return (
        <>
            <div className={styles.profileSection}>
                <h2>我的</h2>
                <div className={styles.avatarSection}>
                    <div className={styles.avatarWrapper}>
                        <img src={usertx} alt="用户头像" />
                        <button className={styles.editAvatar}>
                            <span>📷</span>
                        </button>
                    </div>
                </div>

                <form onSubmit={handleSubmit} className={styles.profileForm}>
                    <div className={styles.formGrid}>
                        <div className={styles.formGroup}>
                            <label>用户名</label>
                            <input
                                type="text"
                                name="username"
                                value={formData.username}
                                onChange={handleInputChange}
                            />
                            {errors.username && <div className={styles.error}>{errors.username}</div>}
                        </div>

                        <div className={styles.formGroup}>
                            <label>电子邮件</label>
                            <input
                                type="email"
                                name="email"
                                value={formData.email}
                                onChange={handleInputChange}
                            />
                            {errors.email && <div className={styles.error}>{errors.email}</div>}
                        </div>

                        <div className={styles.formGroup}>
                            <label>手机号</label>
                            <input
                                type="tel"
                                name="phone"
                                value={formData.phone}
                                onChange={handleInputChange}
                            />
                            {errors.phone && <div className={styles.error}>{errors.phone}</div>}
                        </div>

                        <div className={styles.formGroup}>
                            <label>省份</label>
                            <input
                                type="text"
                                name="province"
                                value={formData.province}
                                onChange={handleInputChange}
                            />
                            {errors.province && <div className={styles.error}>{errors.province}</div>}
                        </div>

                        <div className={styles.formGroup}>
                            <label>详细地址</label>
                            <input
                                type="text"
                                name="address"
                                value={formData.address}
                                onChange={handleInputChange}
                            />
                            {errors.address && <div className={styles.error}>{errors.address}</div>}
                        </div>

                        <div className={styles.formGroup}>
                            <label>性别</label>
                            <div className={styles.radioGroup}>
                                <label>
                                    <input
                                        type="radio"
                                        name="gender"
                                        value="男"
                                        checked={formData.gender === '男'}
                                        onChange={handleInputChange}
                                    />
                                    男
                                </label>
                                <label>
                                    <input
                                        type="radio"
                                        name="gender"
                                        value="女"
                                        checked={formData.gender === '女'}
                                        onChange={handleInputChange}
                                    />
                                    女
                                </label>
                            </div>
                            {errors.gender && <div className={styles.error}>{errors.gender}</div>}
                        </div>
                    </div>

                    <div className={styles.formActions}>
                        <button type="button" onClick={handleCancel} className={styles.cancelButton}>
                            取消
                        </button>
                        <button type="submit" className={styles.updateButton}>
                            更新
                        </button>
                    </div>
                </form>

                {loading && <div className={styles.loading}>正在处理...</div>}
                {success && <div className={styles.success}>更新成功！</div>}
            </div>
        </>
    );
}
